<template>
	<view class="container">
		<view class="address-container">
			<view class="address-item" v-for="(item, index) in list" :key="index" @tap="selectAddress(item)">
				<text class="item">联系人:{{ item.contact }}</text>
				<text class="item">电话:{{ item.telephone }}</text>
				<text class="item">省市区:{{ item.provinceName + ' ' }}{{ item.cityName + ' ' }}{{ item.areaName + ' ' }}</text>
				<text class="item">详细地址:{{ item.address }}</text>
				<view class="operation">
					<view class="operation-item" @tap="update(item.id)">修改</view>
					<view class="operation-item" @tap="deleted(item.id, index)">删除</view>
				</view>
			</view>
		</view>
		<view class="footer"><view class="add" @tap="add">添加</view></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			agencyId: '',
			list: [],
			isSelect: false
		};
	},
	onLoad(e) {
		this.agencyId = e.agencyId;
		if (e.isSelect) {
			this.isSelect = e.isSelect;
		}
	
	},
	onShow() {
		this.$http
			.request({
				url: 'api/Agency/GetAgencyAddress',
				data: {
					agencyId: this.agencyId
				}
			})
			.then(res => {
				// #ifdef H5
				this.$wechat.hideMenu();
				// #endif
				this.list = res;
			});
	},
	methods: {
		add() {
			uni.navigateTo({
				url: 'addressItem?agencyId=' + this.agencyId
			});
		},
		update(e) {
			uni.navigateTo({
				url: 'addressItem?id=' + e
			});
		},
		deleted(id, index) {
			var that = this;
			uni.showModal({
				showCancel: true,
				content: '确认要删除吗',
				success(res) {
					if (res.confirm) {
						that.$http
							.request({
								url: 'api/Agency/DeleteAgencyAddress',
								method: 'DELETE',
								data: {
									id: id
								}
							})
							.then(() => {
								that.list.splice(index, 1);
							});
					}
				}
			});
		},
		selectAddress(item){
			if(this.isSelect)
			{
				uni.$emit('selectAddress',item);
				uni.navigateBack();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	background: #f8f8f8;
}
.address-container {
	margin-bottom: 30rpx;
}
.address-item {
	width: 95%;
	margin: 0 auto;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
	padding: 10rpx;
	font-size: 36rpx;
	.item {
		padding: 4rpx 0;
		line-height: 50rpx;
	}
	.operation {
		margin-top: 15rpx;
		display: flex;
		justify-content: space-around;
		color: #007aff;
	}
}
.footer {
	position: fixed;
	bottom: 20rpx;
	width: 100%;
}
.add {
	width: 80%;
	margin: 0 auto;

	height: 80rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	background: $uni-color-main-dark;
	color: #ffffff;
}
</style>
